<template>
    <div class="show" v-show="show">
      <div class="pic" ref="show"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'concat-pic',
  computed: {
    ...mapState({
      show: state => state.concatPicShow.show,
      showPic: state => state.concatPicShow.showPic
    })
  },
  updated () {
    this.$refs.show.style.background = `url(${this.showPic}) no-repeat`
    this.$refs.show.style.backgroundSize = 'contain'
  }
}
</script>

<style scoped>
.show {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  z-index: 1;
  position: absolute;
}
.show .pic {
  position: absolute;
  width: 50%;
  height: 100%;
  background: url("https://20181106.oss-cn-beijing.aliyuncs.com/concat/qq.jpg") no-repeat;
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
}
</style>
